<template>
  <div class="check-admin-container">
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item :label="$t('group.name')">
          <el-select v-model="filterForm.groupId" :placeholder="$t('common.pleaseSelect') + ' ' + $t('group.name')" clearable>
            <el-option
              v-for="group in groups"
              :key="group.id"
              :label="group.name"
              :value="group.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('attendance.courseName')">
          <el-select v-model="filterForm.courseId" :placeholder="$t('common.pleaseSelect') + ' ' + $t('attendance.courseName')" clearable>
            <el-option
              v-for="course in courses"
              :key="course.id"
              :label="course.name"
              :value="course.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.status')">
          <el-select v-model="filterForm.state" :placeholder="$t('attendance.approveStatus')" clearable>
            <el-option :label="$t('common.all')" :value="null"></el-option>
            <el-option :label="$t('attendance.pending')" :value="0"></el-option>
            <el-option :label="$t('attendance.approved')" :value="1"></el-option>
            <el-option :label="$t('attendance.rejected')" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.dateRange')">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            :range-separator="$t('common.to')"
            :start-placeholder="$t('common.startDate')"
            :end-placeholder="$t('common.endDate')"
            value-format="yyyy-MM-dd"
            @change="handleDateRangeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">{{ $t('common.search') }}</el-button>
          <el-button @click="resetFilter">{{ $t('common.reset') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 当前筛选状态显示区域 -->
    <div class="filter-status" v-if="hasActiveFilters">
      <span>{{ $t('attendance.currentFilter') }}: </span>
      <el-tag v-if="filterForm.groupId" size="small" closable @close="removeFilter('groupId')">
        {{ $t('group.name') }}: {{ getFilterGroupName() }}
      </el-tag>
      <el-tag v-if="filterForm.courseId" size="small" type="success" closable @close="removeFilter('courseId')">
        {{ $t('attendance.courseName') }}: {{ getFilterCourseName() }}
      </el-tag>
      <el-tag v-if="filterForm.state !== null" size="small" type="warning" closable @close="removeFilter('state')">
        {{ $t('common.status') }}: {{ getStateText() }}
      </el-tag>
      <el-tag v-if="filterForm.startDate && filterForm.endDate" size="small" type="info" closable @close="removeFilter('dateRange')">
        {{ $t('common.date') }}: {{ filterForm.startDate }} {{ $t('common.to') }} {{ filterForm.endDate }}
      </el-tag>
    </div>

    <el-table
      :data="leaveList"
      style="width: 100%"
      border
      v-loading="loading"
      :row-class-name="getRowClassName">
      <el-table-column
        :label="$t('attendance.studentName')"
        min-width="100">
        <template slot-scope="scope">
          {{ getUserName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('group.name')"
        min-width="120">
        <template slot-scope="scope">
          {{ getGroupName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('attendance.courseName')"
        min-width="120">
        <template slot-scope="scope">
          {{ getCourseName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('attendance.leaveReason')"
        min-width="100">
        <template slot-scope="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('attendance.leaveType')"
        min-width="100">
        <template slot-scope="scope">
          <el-tag size="medium" :type="getLeaveTypeTagType(scope.row.leaveTypeId)">{{ getLeaveTypeName(scope.row.leaveTypeId) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('attendance.leaveDate')"
        min-width="160">
        <template slot-scope="scope">
          {{ formatDate(scope.row.leaveDate) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('attendance.approveStatus')"
        min-width="120"
        sortable>
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.state === 0" effect="dark">{{ $t('attendance.pending') }}</el-tag>
          <el-tag type="success" v-if="scope.row.state === 1">{{ $t('attendance.approved') }}</el-tag>
          <el-tag type="danger" v-if="scope.row.state === 2">{{ $t('attendance.rejected') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('attendance.applyTime')"
        min-width="160">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createDate) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('attendance.approveRemark')"
        min-width="200"
        v-if="!isMobile">
        <template slot-scope="scope">
          {{ scope.row.approveRemark || $t('attendance.noRemark') }}
        </template>
      </el-table-column>
      <!-- PC端操作列 -->
      <el-table-column
        :label="$t('common.operation')"
        fixed="right"
        width="200"
        v-if="!isMobile">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleApprove(scope.row, 1)"
            v-if="scope.row.state === 0">{{ $t('attendance.checkAdmin.approve') }}</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleApprove(scope.row, 2)"
            v-if="scope.row.state === 0">{{ $t('attendance.checkAdmin.reject') }}</el-button>
          <el-button
            size="mini"
            type="info"
            v-if="scope.row.state !== 0"
            disabled>{{ $t('attendance.checkAdmin.processed') }}</el-button>
        </template>
      </el-table-column>
      
      <!-- 移动端操作列 -->
      <el-table-column
        :label="$t('common.operation')"
        fixed="right"
        width="95"
        v-if="isMobile">
        <template slot-scope="scope">
          <el-popover
            placement="left"
            width="160"
            trigger="click"
            v-if="scope.row.state === 0">
            <div class="mobile-operation-buttons">
              <el-button 
                type="text" 
                size="mini" 
                @click="handleApprove(scope.row, 1)"
                class="approve-button">
                <i class="el-icon-check"></i> {{ $t('attendance.checkAdmin.approve') }}
              </el-button>
              <el-button 
                type="text" 
                size="mini" 
                @click="handleApprove(scope.row, 2)"
                class="delete-button">
                <i class="el-icon-close"></i> {{ $t('attendance.checkAdmin.reject') }}
              </el-button>
              <div class="mobile-remark" v-if="scope.row.leaveTypeId">
                <div class="remark-title">{{ $t('attendance.leaveType') }}:</div>
                <div class="remark-content">{{ getLeaveTypeName(scope.row.leaveTypeId) }}</div>
              </div>
              <div class="mobile-remark" v-if="scope.row.remark">
                <div class="remark-title">{{ $t('attendance.checkAdmin.details') }}:</div>
                <div class="remark-content">{{ scope.row.remark }}</div>
              </div>
            </div>
            <el-button slot="reference" type="primary" size="mini">
              {{ $t('common.operation') }} <i class="el-icon-arrow-down"></i>
            </el-button>
          </el-popover>
          <el-popover
            placement="left"
            width="160"
            trigger="click"
            v-else>
            <div class="mobile-operation-buttons">
              <div class="mobile-status">
                <strong>{{ $t('common.status') }}: </strong>
                <el-tag type="success" v-if="scope.row.state === 1" size="mini">{{ $t('attendance.checkAdmin.approved') }}</el-tag>
                <el-tag type="danger" v-if="scope.row.state === 2" size="mini">{{ $t('attendance.checkAdmin.rejected') }}</el-tag>
              </div>
              <div class="mobile-remark" v-if="scope.row.leaveTypeId">
                <div class="remark-title">{{ $t('attendance.leaveType') }}:</div>
                <div class="remark-content">{{ getLeaveTypeName(scope.row.leaveTypeId) }}</div>
              </div>
              <div class="mobile-remark" v-if="scope.row.remark">
                <div class="remark-title">{{ $t('attendance.checkAdmin.details') }}:</div>
                <div class="remark-content">{{ scope.row.remark }}</div>
              </div>
              <div class="mobile-remark" v-if="scope.row.approveRemark">
                <div class="remark-title">{{ $t('attendance.checkAdmin.approvalOpinion') }}:</div>
                <div class="remark-content">{{ scope.row.approveRemark }}</div>
              </div>
            </div>
            <el-button slot="reference" type="info" size="mini">
              {{ $t('attendance.checkAdmin.details') }} <i class="el-icon-arrow-down"></i>
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :layout="paginationLayout"
        :total="total">
      </el-pagination>
    </div>

    <!-- 审批对话框 -->
    <el-dialog :title="approveDialogTitle" :visible.sync="approveDialogVisible" width="500px" :fullscreen="isMobile">
      <el-form :model="approveForm" ref="approveForm" :rules="approveRules">
        <el-form-item :label="$t('attendance.studentName')" label-width="100px" v-if="currentLeaveInfo">
          <span>{{ currentLeaveInfo.userName || $t('common.unknown') }}</span>
        </el-form-item>
        <el-form-item :label="$t('group.name')" label-width="100px" v-if="currentLeaveInfo">
          <span>{{ currentLeaveInfo.groupName || $t('common.unknown') }}</span>
        </el-form-item>
        <el-form-item :label="$t('course.title')" label-width="100px" v-if="currentLeaveInfo">
          <span>{{ currentLeaveInfo.courseName || $t('common.unknown') }}</span>
        </el-form-item>
        <el-form-item :label="$t('attendance.leaveType')" label-width="100px" v-if="currentLeaveInfo">
          <span>{{ getLeaveTypeName(currentLeaveInfo.leaveTypeId) }}</span>
        </el-form-item>
        <el-form-item :label="$t('attendance.leaveReason')" label-width="100px" v-if="currentLeaveInfo">
          <span>{{ currentLeaveInfo.reason || $t('attendance.noRemark') }}</span>
        </el-form-item>
        <el-form-item :label="$t('attendance.checkAdmin.approvalOpinion')" prop="approveRemark" label-width="100px">
          <el-input
            type="textarea"
            :rows="4"
            :placeholder="$t('attendance.checkAdmin.pleaseEnterOpinion')"
            v-model="approveForm.approveRemark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveDialogVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submitApprove" :loading="submitting">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ElementUI from "element-ui";
import { mapGetters } from 'vuex';

export default {
  name: "LeaveAdmin",
  data() {
    return {
      filterForm: {
        groupId: '',
        courseId: '',
        state: null,
        dateRange: null,
        startDate: null,
        endDate: null
      },
      groups: [],
      courses: [],
      leaveList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      approveDialogVisible: false,
      approveDialogTitle: '',
      approveForm: {
        id: null,
        state: null,
        approveRemark: ''
      },
      approveRules: {
        approveRemark: [
          { required: true, message: this.$t('attendance.checkAdmin.opinionRequired'), trigger: 'blur' },
          { min: 2, max: 200, message: this.$t('attendance.checkAdmin.opinionLength'), trigger: 'blur' }
        ]
      },
      submitting: false,
      isMobile: false,
      paginationLayout: "total, sizes, prev, pager, next, jumper",
      currentLeaveInfo: null, // 当前选中的请假信息
      leaveTypes: [
        { id: 1, name: this.$t('attendance.checkAdmin.personalLeave') },
        { id: 2, name: this.$t('attendance.checkAdmin.sickLeave') },
        { id: 3, name: this.$t('common.other') },
        { id: 4, name: this.$t('attendance.checkAdmin.otherLeave') }
      ]
    }
  },
  created() {
    this.getGroups();
    this.getCourses();
    this.loadData();
    this.checkScreenSize();
  },
  mounted() {
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  computed: {
    ...mapGetters(['getUserId']),
    // 判断是否有活动筛选
    hasActiveFilters() {
      return this.filterForm.groupId || this.filterForm.courseId || this.filterForm.state !== null;
    }
  },
  methods: {
    // 检查屏幕尺寸并设置相应的布局
    checkScreenSize() {
      this.isMobile = document.body.clientWidth < 768;
      // 根据屏幕尺寸调整分页控件布局
      if (this.isMobile) {
        this.paginationLayout = "prev, pager, next";
      } else {
        this.paginationLayout = "total, sizes, prev, pager, next, jumper";
      }
    },
    // 获取班级列表
    getGroups() {
      this.$axios.get("/group/list").then(res => {
        if (res.code === 200) {
          this.groups = res.data || [];
        } else {
          ElementUI.Message.error(res.data.msg || this.$t('attendance.checkAdmin.getClassFailed'));
        }
      }).catch(error => {
        console.error('获取班级列表失败:', error);
        ElementUI.Message.error(this.$t('attendance.checkAdmin.getClassFailed'));
      });
    },
    
    // 获取课程列表
    getCourses() {
      this.$axios.get(`/course/teacher/${this.getUserId}`).then(res => {
        if (res.code === 200) {
          this.courses = res.data || [];
          //console.log(this.courses);
        } else {
          ElementUI.Message.error(res.data.msg || this.$t('attendance.checkAdmin.getCourseFailed'));
        }
      }).catch(error => {
        console.error('获取课程列表失败:', error);
        ElementUI.Message.error(this.$t('attendance.checkAdmin.getCourseFailed'));
      });
    },
    
    // 加载请假数据
    loadData() {
      this.loading = true;
      
      // 构建查询参数
      const params = {
        current: this.currentPage,
        size: this.pageSize
      };
      
      // 添加班级筛选
      if (this.filterForm.groupId) {
        params.groupId = this.filterForm.groupId;
      }
      
      // 添加课程筛选
      if (this.filterForm.courseId) {
        params.courseId = this.filterForm.courseId;
      }
      
      // 添加状态筛选
      if (this.filterForm.state !== null && this.filterForm.state !== '') {
        params.state = this.filterForm.state;
      }
      
      // 添加日期范围筛选
      if (this.filterForm.startDate) {
        params.startDate = this.filterForm.startDate;
      }
      if (this.filterForm.endDate) {
        params.endDate = this.filterForm.endDate;
      }
      
      // 输出日志，方便调试
      //console.log('查询参数:', params);
      
      this.$axios.get("/leave/page", { params }).then(res => {
        this.handleLeaveDataResponse(res);
      }).catch(this.handleLeaveDataError);
    },
    
    // 处理请假数据响应
    handleLeaveDataResponse(res) {
      this.loading = false;
      if (res.code === 200) {
        //console.log('请假数据返回:', res.data);
        
        // 获取请假记录
        let records, total;
        // 检查返回的数据结构是否是分页格式
        if (res.data.records) {
          records = res.data.records || [];
          total = res.data.total || 0;
        } else {
          // 如果是直接返回列表（非分页）
          records = res.data || [];
          total = records.length;
        }
        
        this.total = total;
        
        // 如果是空数据，提示用户
        if (records.length === 0) {
          ElementUI.Message.info(this.$t('attendance.checkAdmin.noRecordsFound'));
          this.leaveList = [];
          return;
        }
        
        // 获取所有用户ID和课程ID
        const userIds = [...new Set(records.map(record => record.userId))];
        const courseIds = [...new Set(records.map(record => record.courseId))];
        const groupIds = [...new Set(records.filter(record => record.groupId).map(record => record.groupId))];
        
        // 创建Promise数组
        const promises = [];
        
        // 获取用户信息
        if (userIds.length > 0) {
          const userPromises = userIds.map(userId => 
            this.$axios.get(`/user/${userId}`).catch(err => {
              console.error(`获取用户信息失败 ID: ${userId}`, err);
              return { data: { code: 500 } };
            })
          );
          promises.push(Promise.all(userPromises).then(responses => {
            const userMap = {};
            responses.forEach((res, index) => {
              if (res.code === 200) {
                userMap[userIds[index]] = res.data;
              }
            });
            return { type: 'users', data: userMap };
          }));
        }
        
        // 获取课程信息
        if (courseIds.length > 0) {
          const coursePromises = courseIds.map(courseId => 
            this.$axios.get(`/course/detail/${courseId}`).catch(err => {
              console.error(`获取课程信息失败 ID: ${courseId}`, err);
              return { data: { code: 500 } };
            })
          );
          promises.push(Promise.all(coursePromises).then(responses => {
            const courseMap = {};
            responses.forEach((res, index) => {
              if (res.code === 200) {
                courseMap[courseIds[index]] = res.data;
              }
            });
            return { type: 'courses', data: courseMap };
          }));
        }
        
        // 等待所有请求完成
        Promise.all(promises).then(results => {
          let userMap = {};
          let courseMap = {};
          
          results.forEach(result => {
            if (result.type === 'users') {
              userMap = result.data;
            } else if (result.type === 'courses') {
              courseMap = result.data;
            }
          });
          
          // 将用户和课程信息添加到请假记录中
          this.leaveList = records.map(record => {
            const user = userMap[record.userId] || {};
            const course = courseMap[record.courseId] || {};
            
            // 优先使用记录中的groupId，如果没有则使用用户的groupId
            let groupId = record.groupId || (user ? user.groupId : null);
            const group = groupId ? this.groups.find(g => g.id === groupId) : null;
            
            return {
              ...record,
              userName: user.name || '未知',
              groupName: group ? group.name : '未知',
              courseName: course.name || '未知'
            };
          });
          
          // 对请假记录进行排序，将待审批的排在前面
          this.leaveList.sort((a, b) => {
            // 如果没有筛选状态，则按状态排序（待审批在前）
            if (this.filterForm.state === null) {
              // 状态为0的排在前面
              if (a.state === 0 && b.state !== 0) return -1;
              if (a.state !== 0 && b.state === 0) return 1;
            }
            
            // 其次按创建时间倒序排列（新的在前）
            return new Date(b.createDate) - new Date(a.createDate);
          });
          
          // 调试输出
          if (this.leaveList.length > 0) {
            //console.log('处理后的请假数据示例:', JSON.stringify(this.leaveList[0]));
          }
        });
      } else {
        ElementUI.Message.error(res.data.msg || this.$t('common.operationFailed'));
      }
    },
    
    // 处理请假数据错误
    handleLeaveDataError(error) {
      console.error('请求失败:', error);
      this.loading = false;
      ElementUI.Message.error(this.$t('common.operationFailedRetry'));
    },
    
    // 处理筛选
    handleFilter() {
      this.currentPage = 1;
      
      // 输出日志，方便调试
      //console.log('筛选条件:', {
      //  班级ID: this.filterForm.groupId,
      //   课程ID: this.filterForm.courseId,
      //   状态: this.filterForm.state
      // });
      
      // 如果同时选择了班级和课程，显示提示信息
      if (this.filterForm.groupId && this.filterForm.courseId) {
        ElementUI.Message.info(`正在查询班级和课程的请假记录`);
      }
      
      this.loadData();
    },
    
    // 重置筛选
    resetFilter() {
      this.filterForm = {
        groupId: '',
        courseId: '',
        state: null,
        dateRange: null,
        startDate: null,
        endDate: null
      };
      ElementUI.Message.info(this.$t('common.reset'));
      this.handleFilter();
    },
    
    // 处理审批
    handleApprove(row, state) {
      this.approveForm.id = row.id;
      this.approveForm.state = state;
      this.approveForm.approveRemark = '';
      this.approveDialogTitle = state === 1 ? this.$t('attendance.checkAdmin.approveLeave') : this.$t('attendance.checkAdmin.rejectLeave');
      this.currentLeaveInfo = row; // 保存当前请假信息
      this.approveDialogVisible = true;
    },
    
    // 提交审批
    submitApprove() {
      this.$refs.approveForm.validate((valid) => {
        if (valid) {
          this.submitting = true;
          
          const approveData = {
            id: this.approveForm.id,
            state: this.approveForm.state,
            approveRemark: this.approveForm.approveRemark
          };
          
          this.$axios.post("/leave/approve", approveData).then(res => {
            this.submitting = false;
            if (res.code === 200) {
              ElementUI.Message.success(this.$t('attendance.checkAdmin.approvalSuccess'));
              this.approveDialogVisible = false;
              this.loadData();
            } else {
              ElementUI.Message.error(res.data.msg || this.$t('attendance.checkAdmin.approvalFailed'));
            }
          }).catch(() => {
            this.submitting = false;
            ElementUI.Message.error(this.$t('common.operationFailedRetry'));
          });
        }
      });
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '无';
      try {
        const date = new Date(dateStr);
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
      } catch(e) {
        return dateStr;
      }
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },

    getUserName(row) {
      if (row.userName) return row.userName;
      if (row.user && row.user.name) return row.user.name;
      return '未知';
    },

    getGroupName(row) {
      if (row.groupName) return row.groupName;
      if (row.user && row.user.userGroup) return row.user.userGroup;
      if (row.groupId) {
        const group = this.groups.find(g => g.id === row.groupId);
        return group ? group.name : '未知';
      }
      return '未知';
    },

    getCourseName(row) {
      if (row.courseName) return row.courseName;
      if (row.course && row.course.name) return row.course.name;
      return '未知';
    },
    
    // 获取请假类型名称
    getLeaveTypeName(typeId) {
      if (!typeId) return this.$t('common.unknown');
      const type = this.leaveTypes.find(t => t.id === parseInt(typeId));
      return type ? type.name : this.$t('common.unknown');
    },
    
    // 获取请假类型标签样式
    getLeaveTypeTagType(typeId) {
      if (!typeId) return '';
      const typeMap = {
        1: 'info',    // 事假
        2: 'danger',  // 病假
        3: 'warning', // 公假
        4: 'success'  // 其他
      };
      return typeMap[typeId] || '';
    },

    // 获取当前筛选状态
    getFilterGroupName() {
      const group = this.groups.find(g => g.id === this.filterForm.groupId);
      return group ? group.name : '全部班级';
    },

    getFilterCourseName() {
      const course = this.courses.find(c => c.id === this.filterForm.courseId);
      return course ? course.name : '全部课程';
    },

    getStateText() {
      if (this.filterForm.state === null) return '全部状态';
      const stateText = this.filterForm.state === 0 ? '待审批' : this.filterForm.state === 1 ? '已批准' : '已拒绝';
      return stateText;
    },

    // 移除筛选条件
    removeFilter(filterType) {
      this.filterForm[filterType] = null;
      this.handleFilter();
    },

    handleDateRangeChange(value) {
      if (value) {
        this.filterForm.startDate = value[0];
        this.filterForm.endDate = value[1];
      } else {
        this.filterForm.startDate = null;
        this.filterForm.endDate = null;
      }
      this.handleFilter();
    },

    getRowClassName({ row }) {
      if (row.state === 0) {
        return 'pending-row';
      }
      return '';
    }
  }
}
</script>

<style scoped>
.check-admin-container {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.filter-status {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.filter-status span {
  margin-right: 10px;
  color: #606266;
  font-size: 14px;
}

.filter-status .el-tag {
  margin-right: 10px;
  margin-bottom: 5px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 待审批行高亮样式 */
::v-deep .pending-row {
  background-color: rgba(255, 236, 184, 0.4);
}

/* 鼠标悬停时的样式 */
::v-deep .pending-row:hover > td {
  background-color: rgba(255, 236, 184, 0.7) !important;
}

.mobile-operation-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mobile-operation-buttons .el-button {
  margin-left: 0;
  margin-bottom: 8px;
  width: 100%;
  text-align: left;
}

.mobile-operation-buttons .el-button:last-child {
  margin-bottom: 0;
}

.mobile-operation-buttons .approve-button {
  color: #67C23A;
}

.mobile-operation-buttons .delete-button {
  color: #F56C6C;
}

.mobile-status {
  margin-bottom: 10px;
}

.mobile-remark {
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.remark-title {
  font-size: 12px;
  color: #909399;
  margin-bottom: 5px;
}

.remark-content {
  font-size: 13px;
  color: #606266;
  word-break: break-all;
}

@media screen and (max-width: 768px) {
  .check-admin-container {
    padding: 10px;
  }
  
  .filter-form {
    flex-direction: column;
  }
  
  .filter-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .filter-form .el-select {
    width: 100%;
  }
  
  .pagination-container {
    text-align: center;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-table th {
    padding: 8px 0;
  }
  
  .el-table td {
    padding: 5px 0;
  }
}
</style>